<template>
  <FullscreenCard class="wrapper">
    <div class="grid-popover" v-show="codeSelectVisible">
      <div><b>With title</b></div>
      <div>Some content</div>
    </div>
		<div class="grid" ref="gridDom"></div>
	</FullscreenCard>
</template>

<script setup lang="ts">
import { ClickOutside as vClickOutside } from 'element-plus'
import * as echarts from 'echarts'
import FullscreenCard from '@/components/FullscreenCard'

const codeSelectVisible = ref<Boolean>(false)

const gridDom = ref<any>(null)

const onClickOutside = () => {
  codeSelectVisible.value = false
}

const initChart = () => {
  const myChartGrid = echarts.init(gridDom.value)
  const option =  {
    title: {
      left: 'center',
      text: 'echart grid'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      left: 'center',
      top: 'bottom'
    },
    toolbox: {
      show: true,
      orient: 'horizontal', 
      x: 'right',
      y: 'top',        
      feature: {
        myCodeSelect: {
          show: true,
          title: '自定义扩展方法',
          icon: 'image:///src/assets/img/icon-grid.png',
          onclick(e: MouseEvent) {
            console.log('myCodeSelect', codeSelectVisible.value)
            codeSelectVisible.value = !codeSelectVisible.value
          }
        },
        dataZoom: {
          show: true,
          // yAxisIndex: 'none',
          title: {
            dataZoom: '区域缩放',
            dataZoomReset: '区域缩放后退'
          }
        },
        dataView: {
          show: true,
          title: '数据视图',
          readOnly: true,
          lang: ['数据视图', '关闭', '刷新']
        },
        magicType: {
          show: true,
          title: {
            line: '折线图切换',
            bar: '柱形图切换',
            stack: '堆积',
            tiled: '平铺',
            force: '力导向布局图切换',
            chord: '和弦图切换',
            pie: '饼图切换',
            funnel: '漏斗图切换'
          },
          type: ['line', 'bar'] 
        },
        restore: {
          show: true,
          title: '还原'
        },
        saveAsImage: {
          show: true,
          title: '保存为图片',
          type: 'png',
          lang: ['点击保存']
        },
        
      }
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: 'all'
        }
      ]
    },
    grid: [
      {
        top: '50px',
        width: '40%',
        height: '35%',
        left: '5%',
      },
      {
        top: '50px',
        width: '40%',
        height: '35%',
        left: '55%',
      },
      {
        top: '50%',
        width: '40%',
        height: '35%',
        left: '5%',
      },
      {
        top: '50%',
        width: '40%',
        height: '35%',
        left: '55%',
      },
    ],
    dataZoom: [{
      xAxisIndex: [0, 1, 2, 3],
      yAxisIndex: [0, 1, 2, 3],
      type: 'inside',
      show: true,
      realtime: true,
      start: 0,
      end: 100,
    }, {
      type: 'slider',
      show: true,
      realtime: true,
      start: 0,
      end: 100,
    }],
    xAxis: [
      {
        gridIndex: 0,
        type: 'category',
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      {
        gridIndex: 1,
        type: 'category',
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      {
        gridIndex: 2,
        type: 'category',
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      {
        gridIndex: 3,
        type: 'category',
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
    ],
    yAxis: [
      {
        gridIndex: 0,
        type: 'value',
        min: (value:any) => value.min,
        max: (value:any) => value.max,
        axisLabel: {
          formatter: '{value} °C'
        },
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        gridIndex: 1,
        type: 'value',
        min: (value:any) => value.min,
        max: (value:any) => value.max,
        axisLabel: {
          formatter: '{value} °C'
        },
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        gridIndex: 2,
        type: 'value',
        min: (value:any) => value.min,
        max: (value:any) => value.max,
        axisLabel: {
          formatter: '{value} °C'
        },
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        gridIndex: 3,
        type: 'value',
        min: (value:any) => value.min,
        max: (value:any) => value.max,
        axisLabel: {
          formatter: '{value} °C'
        },
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
    ],
    series: [
      {
        name: 'Higest',
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 0,
        smooth: true,
        data: [20, 21, 33, 21, 22, 22, 19],
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 10
        },
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: 'Highest',
        type: 'line',
        xAxisIndex: 1,
        yAxisIndex: 1,
        smooth: true,
        data: [10, 11, 13, 11, 12, 12, 9],
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 10
        },
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: 'Lowest',
        type: 'line',
        xAxisIndex: 2,
        yAxisIndex: 2,
        smooth: true,
        data: [1, -2, 2, 5, 3, 2, 0],
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 10
        },
        markPoint: {
          data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: 'Lowest2',
        type: 'line',
        xAxisIndex: 3,
        yAxisIndex: 3,
        smooth: true,
        data: [1, -2, 2, 5, 3, 2, 0],
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 10
        },
        markPoint: {
          data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
    ]
  }

  myChartGrid.setOption(option)

  window.addEventListener( 'resize', () => {
    myChartGrid.resize()
  } )
}
onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20px;
	background-color: var(--vt-c-white);
}
.grid {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.grid-popover {
  position: absolute; 
  right: 200px; 
  top: 60px;
  z-index: 3000;
  background-color: #fff;
  min-width: 150px;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  padding: 12px;
}
</style>
